<template>
  <view class="container">
    <view v-for="(item,index) in list" :key="index" class="item" :class="{'active':props.current==index}"
          @click="$emit('change',index)">
      {{ item }}
    </view>
  </view>
</template>

<script setup lang="ts">
const props = defineProps(['list', 'current'])
</script>


<style scoped lang="scss">
.container{
  display: flex;
  justify-content: space-around;
  padding-bottom: 10rpx;
}
.item{
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 50rpx;
  color: #B0B0B0;
}
.active{
  color: black;
  font-weight: 800;
  font-size: 30rpx;
}
</style>
